<!doctype html>
<html>
  <title>Pick an Image</title>
  <script src="/lib/webintents.debug.js"></script>
  <script src="/lib/events.js"></script>
  <link rel="stylesheet" href="/css/reset.css" />
  <link rel="stylesheet" href="/css/base.css" />
  <style>
    iframe {
      float:left;
      width: 50%;
      height: 800px;
    }
  </style>
  <script>
    var getImageData = function(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height; 
      var context = canvas.getContext("2d");

      context.drawImage(img, 0, 0); 
      return canvas.toDataURL("image/png");
    };

    var returnImage = function(e) {
      if(!!window.intent) {
        // Do some magic to return the raw data.
        var data = [ getImageData(e.target) ]; 

        window.intent.postResult(data);
        setTimeout(function() { window.close();}, 500);
      }
   };

   attachEventListener(window, "load", function() {
     var img1 = document.getElementById("img1");
     var img2 = document.getElementById("img2");
     var img3 = document.getElementById("img3");

     attachEventListener(img1, "click", returnImage, false);
     attachEventListener(img2, "click", returnImage, false);
     attachEventListener(img3, "click", returnImage, false);
   }, false);   

  </script>
  <body>
    <header>
      <h1>Kinlan's Cloud File Store</h1>
    </header>
    <section>
    <p>Select a file for the app to use</p>
    <div>
      <img id="img1" src="images/kitten1.jpg">
      <img id="img2" src="images/kitten2.jpg">
      <img id="img3" src="images/kitten3.jpg">
    </div>
    <h2>Code</h2>
    <pre>var getImageData = function(img) {
  ...
  return ......;
};

var returnImage = function(e) {
  if(!!window.intent) {
    // Do some magic to return the raw data.
    var data = [ getImageData(e.target) ] ; 
  
    window.intent.postResult(data);
    setTimeout(function() { window.close();}, 500);
  }
};</pre>
    </section>
  </body>
</html>
